import React from 'react'

class CKEditor extends React.Component {
    constructor(props){
        super(props)
        this.componentDidMount = this.componentDidMount.bind(this)
    }

    componentDidMount(){
        const self = this;
        const editor = CKEDITOR.replace( 'editor',{
            filebrowserImageUploadUrl:'/back/news/imageUpload.do',
            toolbar:[
                {name:'document',items:['Source','-']},
                {name:'editing',items:['Replace','CodeSnippet']},
                {name:'basicstyles',items:['RemoveFormat','Bold','Italic','Strike','TextColor','BGColor']},
                { name: 'paragraph', items : [ 'Subscript','Superscript','NumberedList','BulletedList','Outdent','Indent','Blockquote',  
                '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
                { name: 'links', items : [ 'Link','Unlink','Image','Table','SpecialChar','PageBreak','ShowBlocks','code','Maximize' ] },  
            ]
        } );
        editor.setData(this.props.content)
        editor.on( 'change', function( evt ) {
            const val = evt.editor.getData();
            if(self.props.onChange)
                self.props.onChange(val,evt);
        });
    }

    render(){
        return (
            <textarea name="content" id="editor"></textarea>
        )
    }
}

CKEditor.defaultProps = {
    content:'',
    onChange:''
}

export default CKEditor